<template>
  <div class="order-create-container">
    <el-card class="order-create-card">
      <div class="order-create-header">
        <el-button @click="goBack" icon="ArrowLeft">返回</el-button>
        <div class="order-create-title">创建新订单</div>
      </div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="起点">
          <el-autocomplete
            v-model="form.start_address"
            :fetch-suggestions="searchStartAddress"
            placeholder="请输入起点地址或在地图上选择"
            @select="handleStartSelect"
            @focus="selectStartPoint"
            clearable
            style="width: 100%"
          >
            <template #default="{ item }">
              <div class="address-item">
                <div class="address-name">{{ item.name }}</div>
                <div class="address-detail">{{ item.district }}</div>
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="终点">
          <el-autocomplete
            v-model="form.end_address"
            :fetch-suggestions="searchEndAddress"
            placeholder="请输入终点地址或在地图上选择"
            @select="handleEndSelect"
            @focus="selectEndPoint"
            clearable
            style="width: 100%"
          >
            <template #default="{ item }">
              <div class="address-item">
                <div class="address-name">{{ item.name }}</div>
                <div class="address-detail">{{ item.district }}</div>
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            @click="planRouteAndShowMap"
            :disabled="!form.start_address || !form.end_address"
            style="width: 100%; margin-bottom: 16px;"
          >
            规划路线
          </el-button>
        </el-form-item>

        <!-- 路线信息显示区域 -->
        <el-form-item label="路线信息" v-if="routeInfo.distance && showRouteInfo">
          <div class="route-info">
            <div class="route-item">
              <span class="route-label">距离：</span>
              <span class="route-value">{{ routeInfo.distance_text }}</span>
            </div>
            <div class="route-item">
              <span class="route-label">预计时间：</span>
              <span class="route-value">{{ routeInfo.estimated_time }}</span>
            </div>
            <div class="route-item">
              <span class="route-label">预估价格：</span>
              <span class="route-value price">￥{{ routeInfo.order_amount }}</span>
            </div>
          </div>
        </el-form-item>

        <!-- 路线规划中的提示 -->
        <el-form-item v-if="isPlanning">
          <div style="text-align: center; color: orange;">
            <i class="el-icon-loading"></i> 路线规划中，请稍候...
          </div>
        </el-form-item>

        <el-form-item v-if="showRouteInfo && routeInfo.distance">
          <el-button type="primary" @click="createOrder" :loading="loading" style="width: 100%;">下单</el-button>
        </el-form-item>
      </el-form>
      <!-- 地图容器，只在显示路线信息时显示 -->
      <div class="map-wrap" v-if="showRouteInfo">
        <div id="order-map" style="width:100%;height:100%;min-height:300px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onActivated, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { http } from '../utils/request'
import { useRouter } from 'vue-router'
import { orderAPI } from '@/api/order'

const router = useRouter()
const form = ref({
  start_address: '',
  end_address: '',
  origin: '',
  destination: ''
})
const estimate = ref({})
const routeInfo = ref({})  // 新增：路线信息
const loading = ref(false)
const showRouteInfo = ref(false)  // 控制路线信息和地图的显示
const isPlanning = ref(false)  // 控制路线规划中的状态

const map = ref(null)
const startMarker = ref(null)
const endMarker = ref(null)
const routeLine = ref(null)  // 新增：路线轨迹
const selecting = ref('start') // 当前选择的是起点还是终点

// 地址搜索相关
const autoComplete = ref(null)
const searchResults = ref([])

// 设置高德地图安全密钥配置
window._AMapSecurityConfig = {
  securityJsCode: '58266405e3cd60779995daa1578cb419'
}

function loadAMapScript(callback) {
  if (window.AMap) {
    callback()
    return
  }

  const script = document.createElement('script')
  script.type = 'text/javascript'
  // 加载高德地图API
  script.src = 'https://webapi.amap.com/maps?v=2.0&key=b40eef5f6996970d70059f7b038a1222'
  script.onload = () => {
    // 确保AMap加载完成后再加载插件
    setTimeout(() => {
      // 动态加载Geocoder和PlaceSearch插件
      window.AMap.plugin(['AMap.Geocoder', 'AMap.PlaceSearch'], () => {
        callback()
      })
    }, 100)
  }
  document.head.appendChild(script)
}

// 初始化地图的函数
function initMap() {
  console.log('开始初始化地图...')

  // 检查地图容器是否存在
  const mapContainer = document.getElementById('order-map')
  if (!mapContainer) {
    console.error('地图容器不存在')
    return
  }

  // 如果地图已经存在，先销毁
  if (map.value) {
    map.value.destroy()
    map.value = null
  }

  try {
    map.value = new window.AMap.Map('order-map', {
      zoom: 12,
      center: [116.397128, 39.916527],
      mapStyle: 'amap://styles/normal'
    })

    console.log('地图创建成功')

    // 创建Geocoder实例
    const geocoder = new window.AMap.Geocoder({
      city: "010", // 城市设为北京，默认："全国"
      radius: 1000 // 范围，默认：500
    })

    // 绑定地图点击事件
    map.value.on('click', (e) => {
      console.log('地图被点击:', e.lnglat)
      const lnglat = e.lnglat
      // 使用逆地理编码获取地点名称
      geocoder.getAddress(lnglat, (status, result) => {
        console.log('Geocoder status:', status, 'result:', result) // 添加调试信息
        if (status === 'complete' && result.regeocode) {
          const address = result.regeocode.formattedAddress
          console.log('Address found:', address) // 添加调试信息
          if (selecting.value === 'start') {
            form.value.start_address = address
            form.value.origin = `${lnglat.lng},${lnglat.lat}`
            if (!startMarker.value) {
              startMarker.value = new window.AMap.Marker({ position: lnglat, map: map.value, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png' })
            } else {
              startMarker.value.setPosition(lnglat)
            }
            selecting.value = 'end'
          } else {
            form.value.end_address = address
            form.value.destination = `${lnglat.lng},${lnglat.lat}`
            if (!endMarker.value) {
              endMarker.value = new window.AMap.Marker({ position: lnglat, map: map.value, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png' })
            } else {
              endMarker.value.setPosition(lnglat)
            }
            selecting.value = 'start'
          }
        } else {
          console.log('Geocoder failed, using coordinates') // 添加调试信息
          // 如果逆地理编码失败，使用默认地址
          if (selecting.value === 'start') {
            form.value.start_address = `北京市朝阳区建外街道建国门外大街`
            form.value.origin = `${lnglat.lng},${lnglat.lat}`
            console.log('设置起点:', form.value.origin)
            if (!startMarker.value) {
              startMarker.value = new window.AMap.Marker({ position: lnglat, map: map.value, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png' })
            } else {
              startMarker.value.setPosition(lnglat)
            }
            selecting.value = 'end'
          } else {
            form.value.end_address = `北京市西城区复兴路街道复兴路`
            form.value.destination = `${lnglat.lng},${lnglat.lat}`
            console.log('设置终点:', form.value.destination)
            if (!endMarker.value) {
              endMarker.value = new window.AMap.Marker({ position: lnglat, map: map.value, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png' })
            } else {
              endMarker.value.setPosition(lnglat)
            }
            selecting.value = 'start'
          }


        }
      })
    })

    console.log('地图初始化完成')
  } catch (error) {
    console.error('地图初始化失败:', error)
  }
}

// 在组件挂载时加载地图脚本，但不初始化地图
onMounted(() => {
  loadAMapScript(() => {
    // 地图脚本加载完成，但不立即初始化地图
    console.log('地图脚本加载完成')
  })
})

// 页面激活时不自动初始化地图
onActivated(() => {
  console.log('页面激活')
  // 如果已经显示路线信息，则重新初始化地图
  if (showRouteInfo.value) {
    setTimeout(() => {
      if (window.AMap) {
        initMap()
      } else {
        loadAMapScript(() => {
          initMap()
        })
      }
    }, 100)
  }
})

// 组件卸载前清理地图
onBeforeUnmount(() => {
  if (map.value) {
    map.value.destroy()
    map.value = null
  }
})

// 规划路线并显示地图的函数
async function planRouteAndShowMap() {
  if (!form.value.start_address || !form.value.end_address) {
    ElMessage.warning('请先输入起点和终点')
    return
  }

  isPlanning.value = true

  try {
    // 如果没有坐标信息，先进行地理编码
    if (!form.value.origin && form.value.start_address) {
      await geocodeAddressPromise(form.value.start_address, 'start')
    }
    if (!form.value.destination && form.value.end_address) {
      await geocodeAddressPromise(form.value.end_address, 'end')
    }

    // 等待一下确保坐标获取完成
    await new Promise(resolve => setTimeout(resolve, 500))

    if (!form.value.origin || !form.value.destination) {
      ElMessage.error('无法获取地址坐标，请重新输入')
      return
    }

    // 显示地图和路线信息区域
    showRouteInfo.value = true

    // 等待DOM更新后初始化地图
    await new Promise(resolve => setTimeout(resolve, 100))

    if (window.AMap) {
      initMap()
    } else {
      loadAMapScript(() => {
        initMap()
      })
    }

    // 进行路线规划
    planRoute()

  } finally {
    isPlanning.value = false
  }
}

// 路线规划函数
function planRoute() {
  if (!form.value.origin || !form.value.destination) {
    console.log('起点或终点坐标为空')
    return
  }

  console.log('开始路线规划:', form.value.origin, '->', form.value.destination)

  const startPoint = form.value.origin.split(',')
  const endPoint = form.value.destination.split(',')

  const startLng = parseFloat(startPoint[0])
  const startLat = parseFloat(startPoint[1])
  const endLng = parseFloat(endPoint[0])
  const endLat = parseFloat(endPoint[1])

  // 先计算直线距离作为备用（单位：米）
  const straightDistance = getDistance(startLat, startLng, endLat, endLng)
  const estimatedDuration = Math.round(straightDistance / 1000 * 3 * 60) // 3分钟/公里

  // 设置默认路线信息
  routeInfo.value = {
    distance: straightDistance,
    duration: estimatedDuration,
    distance_text: `${(straightDistance / 1000).toFixed(1)}公里`,
    estimated_time: `${Math.floor(estimatedDuration / 60)}分${estimatedDuration % 60}秒`,
    order_amount: calculatePrice(straightDistance, estimatedDuration)
  }

  console.log('设置默认路线信息:', routeInfo.value)

  // 使用高德地图API获取精确的路线信息
  if (window.AMap) {
    window.AMap.plugin(['AMap.Driving'], () => {
      const driving = new window.AMap.Driving({
        map: map.value,
        showTraffic: true,
        hideMarkers: false,
        autoFitView: true
      })

      driving.search(
        [startLng, startLat],
        [endLng, endLat],
        (status, result) => {
          console.log('高德路线规划结果:', status, result)
          if (status === 'complete' && result.routes && result.routes.length > 0) {
            const route = result.routes[0]
            const distance = route.distance // 米
            const duration = route.time // 秒

            routeInfo.value = {
              distance: distance,
              duration: duration,
              distance_text: `${(distance / 1000).toFixed(1)}公里`,
              estimated_time: formatTime(duration),
              order_amount: calculatePrice(distance, duration),
              route_polyline: route.path // 保存路线轨迹
            }
            console.log('使用高德API更新路线信息:', routeInfo.value)
          } else {
            console.warn('高德路线规划失败，使用估算数据:', status, result)
          }
        }
      )
    })
  }
}

// 计算订单价格
function calculatePrice(distance, duration) {
  const baseFare = 10 // 起步价10元
  const distanceRate = 2 // 每公里2元
  const timeRate = 0.5 // 每分钟0.5元

  const distancePrice = (distance / 1000) * distanceRate
  const timePrice = (duration / 60) * timeRate

  return (baseFare + distancePrice + timePrice).toFixed(2)
}

// 格式化时间显示
function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  if (minutes > 0) {
    return `${minutes}分${remainingSeconds}秒`
  } else {
    return `${remainingSeconds}秒`
  }
}

// 计算两点间距离的函数（单位：米）
function getDistance(lat1, lng1, lat2, lng2) {
  const radLat1 = lat1 * Math.PI / 180.0
  const radLat2 = lat2 * Math.PI / 180.0
  const a = radLat1 - radLat2
  const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
  s = s * 6378.137 // 地球半径
  s = Math.round(s * 10000) / 10000
  return s * 1000 // 转换为米
}

function selectStartPoint() {
  selecting.value = 'start'
}
function selectEndPoint() {
  selecting.value = 'end'
}

// 地址搜索函数
function searchStartAddress(queryString, callback) {
  searchAddress(queryString, callback)
}

function searchEndAddress(queryString, callback) {
  searchAddress(queryString, callback)
}

function searchAddress(queryString, callback) {
  if (!queryString) {
    callback([])
    return
  }

  // 如果高德地图API已加载，使用PlaceSearch进行搜索
  if (window.AMap) {
    window.AMap.plugin(['AMap.PlaceSearch'], () => {
      const placeSearch = new window.AMap.PlaceSearch({
        city: '北京', // 限制在北京市搜索
        pageSize: 10,
        pageIndex: 1
      })

      placeSearch.search(queryString, (status, result) => {
        if (status === 'complete' && result.poiList && result.poiList.pois) {
          const suggestions = result.poiList.pois.map(poi => ({
            value: poi.name,
            name: poi.name,
            district: poi.district + poi.address,
            location: poi.location,
            address: poi.address,
            adcode: poi.adcode
          }))
          callback(suggestions)
        } else {
          // 如果搜索失败，提供一些默认建议
          callback(getDefaultSuggestions(queryString))
        }
      })
    })
  } else {
    // 如果高德地图API未加载，提供默认建议
    callback(getDefaultSuggestions(queryString))
  }
}

// 提供默认地址建议
function getDefaultSuggestions(queryString) {
  const defaultAddresses = [
    { value: '北京站', name: '北京站', district: '东城区毛家湾胡同甲13号' },
    { value: '北京西站', name: '北京西站', district: '丰台区莲花池东路118号' },
    { value: '北京南站', name: '北京南站', district: '丰台区永外大街车站路12号' },
    { value: '首都国际机场', name: '首都国际机场', district: '顺义区机场西路' },
    { value: '大兴国际机场', name: '大兴国际机场', district: '大兴区榆垡镇' },
    { value: '天安门广场', name: '天安门广场', district: '东城区东长安街' },
    { value: '故宫博物院', name: '故宫博物院', district: '东城区景山前街4号' },
    { value: '颐和园', name: '颐和园', district: '海淀区新建宫门路19号' },
    { value: '北京大学', name: '北京大学', district: '海淀区颐和园路5号' },
    { value: '清华大学', name: '清华大学', district: '海淀区清华园1号' }
  ]

  return defaultAddresses.filter(addr =>
    addr.name.includes(queryString) || addr.district.includes(queryString)
  )
}

// 处理起点选择
function handleStartSelect(item) {
  form.value.start_address = item.value

  // 如果有位置信息，设置坐标和标记
  if (item.location) {
    const lng = item.location.lng || item.location.getLng()
    const lat = item.location.lat || item.location.getLat()
    form.value.origin = `${lng},${lat}`

    // 在地图上添加标记
    if (map.value) {
      const position = new window.AMap.LngLat(lng, lat)
      if (!startMarker.value) {
        startMarker.value = new window.AMap.Marker({
          position: position,
          map: map.value,
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png'
        })
      } else {
        startMarker.value.setPosition(position)
      }

      // 移动地图中心到选中位置
      map.value.setCenter(position)
    }
  } else {
    // 如果没有坐标信息，使用地理编码获取坐标
    geocodeAddress(item.value, 'start')
  }

  selecting.value = 'end'
}

// 处理终点选择
function handleEndSelect(item) {
  form.value.end_address = item.value

  // 如果有位置信息，设置坐标和标记
  if (item.location) {
    const lng = item.location.lng || item.location.getLng()
    const lat = item.location.lat || item.location.getLat()
    form.value.destination = `${lng},${lat}`

    // 在地图上添加标记
    if (map.value) {
      const position = new window.AMap.LngLat(lng, lat)
      if (!endMarker.value) {
        endMarker.value = new window.AMap.Marker({
          position: position,
          map: map.value,
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'
        })
      } else {
        endMarker.value.setPosition(position)
      }

      // 移动地图中心到选中位置
      map.value.setCenter(position)
    }
  } else {
    // 如果没有坐标信息，使用地理编码获取坐标
    geocodeAddress(item.value, 'end')
  }

  selecting.value = 'start'
}

// Promise版本的地理编码函数
function geocodeAddressPromise(address, type) {
  return new Promise((resolve, reject) => {
    if (!window.AMap) {
      reject(new Error('高德地图API未加载'))
      return
    }

    window.AMap.plugin(['AMap.Geocoder'], () => {
      const geocoder = new window.AMap.Geocoder({
        city: '北京'
      })

      geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.geocodes && result.geocodes.length > 0) {
          const location = result.geocodes[0].location
          const lng = location.lng || location.getLng()
          const lat = location.lat || location.getLat()

          if (type === 'start') {
            form.value.origin = `${lng},${lat}`
          } else {
            form.value.destination = `${lng},${lat}`
          }

          resolve({ lng, lat })
        } else {
          reject(new Error('地理编码失败'))
        }
      })
    })
  })
}

// 地理编码：将地址转换为坐标
function geocodeAddress(address, type) {
  if (!window.AMap) return

  window.AMap.plugin(['AMap.Geocoder'], () => {
    const geocoder = new window.AMap.Geocoder({
      city: '北京'
    })

    geocoder.getLocation(address, (status, result) => {
      if (status === 'complete' && result.geocodes && result.geocodes.length > 0) {
        const location = result.geocodes[0].location
        const lng = location.lng || location.getLng()
        const lat = location.lat || location.getLat()

        if (type === 'start') {
          form.value.origin = `${lng},${lat}`

          if (map.value) {
            const position = new window.AMap.LngLat(lng, lat)
            if (!startMarker.value) {
              startMarker.value = new window.AMap.Marker({
                position: position,
                map: map.value,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png'
              })
            } else {
              startMarker.value.setPosition(position)
            }
            map.value.setCenter(position)
          }
        } else {
          form.value.destination = `${lng},${lat}`

          if (map.value) {
            const position = new window.AMap.LngLat(lng, lat)
            if (!endMarker.value) {
              endMarker.value = new window.AMap.Marker({
                position: position,
                map: map.value,
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'
              })
            } else {
              endMarker.value.setPosition(position)
            }
            map.value.setCenter(position)
          }
        }


      }
    })
  })
}

function goBack() {
  router.go(-1)
}

async function createOrder() {
  if (!form.value.start_address || !form.value.end_address || !form.value.origin || !form.value.destination) {
    ElMessage.warning('请先输入起点和终点，并点击规划路线')
    return
  }

  // 如果没有路线信息，提示用户先规划路线
  if (!routeInfo.value.distance) {
    ElMessage.warning('请先点击规划路线按钮')
    return
  }

  loading.value = true
  try {
    const passenger_id = localStorage.getItem('userid')

    // 准备订单数据，包含前端计算的路线信息
    const orderData = {
      passenger_id,
      start_address: form.value.start_address,
      end_address: form.value.end_address,
      origin: form.value.origin,
      destination: form.value.destination,
      order_amount: routeInfo.value.order_amount,
      distance: routeInfo.value.distance,
      duration: routeInfo.value.duration
    }

    console.log('创建订单数据:', orderData)

    const res = await orderAPI.createOrder(orderData)

    console.log('订单创建响应:', res)

    if (res.data.code === 200) {
      ElMessage.success('订单创建成功')
      router.push(`/order/detail/${res.data.data.order_id}`)
    } else {
      ElMessage.error(res.data.message || '订单创建失败')
    }
  } catch (e) {
    console.error('订单创建失败:', e)
    ElMessage.error('订单创建失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.order-create-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.order-create-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>') no-repeat center center;
  background-size: cover;
  opacity: 0.3;
}
.order-create-card {
  width: 600px;
  max-width: 90vw;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 40px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: slideInUp 0.6s ease-out;
}
.order-create-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.order-create-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  margin: 0 auto 8px auto;
  letter-spacing: 1px;
  position: relative;
}

.order-create-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}
.map-wrap {
  margin-top: 24px;
  height: 300px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideInUp 0.6s ease-out;
}
.map-placeholder {
  color: #aaa;
}

/* 路线信息样式 */
.route-info {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #e1e8ed;
  margin-bottom: 10px;
}

.route-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.route-item:last-child {
  margin-bottom: 0;
}

.route-label {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.route-value {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.route-value.price {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
  font-weight: 700;
}

/* 美化表单元素 */
:deep(.el-form-item__label) {
  font-weight: 600;
  color: #334155;
  font-size: 16px;
}

:deep(.el-input__inner) {
  border-radius: 12px;
  border: 2px solid #e1e5e9;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:deep(.el-button) {
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 12px 24px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

:deep(.el-button--success:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.route-info {
  animation: slideInUp 0.8s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-create-container {
    padding: 16px;
  }

  .order-create-card {
    width: 95vw;
    padding: 24px;
    border-radius: 16px;
  }

  .order-create-title {
    font-size: 24px;
  }

  .map-wrap {
    height: 250px;
  }
}

/* 地址搜索建议样式 */
.address-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.address-item:last-child {
  border-bottom: none;
}

.address-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.address-detail {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

/* 自动补全输入框样式 */
:deep(.el-autocomplete) {
  width: 100%;
}

:deep(.el-autocomplete .el-input__inner) {
  border-radius: 12px;
  border: 2px solid #e1e5e9;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
}

:deep(.el-autocomplete .el-input__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

:deep(.el-autocomplete-suggestion) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

:deep(.el-autocomplete-suggestion li) {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s ease;
}

:deep(.el-autocomplete-suggestion li:hover) {
  background-color: #f8f9fa;
}

:deep(.el-autocomplete-suggestion li:last-child) {
  border-bottom: none;
}
</style>